<script setup lang="ts">
import type { TableColumnProps } from 'ant-design-vue';

import { ref } from 'vue';

// 表格列配置
const columns: TableColumnProps[] = [
  { title: '客户姓名', dataIndex: 'customerName', key: 'customerName' },
  { title: '原负责员工', dataIndex: 'fromStaffName', key: 'fromStaffName' },
  { title: '新负责员工', dataIndex: 'toStaffName', key: 'toStaffName' },
  { title: '店铺', dataIndex: 'storeName', key: 'storeName' },
  { title: '迁移类型', dataIndex: 'transferType', key: 'transferType' },
  { title: '迁移原因', dataIndex: 'transferReason', key: 'transferReason' },
  { title: '操作人', dataIndex: 'operatorName', key: 'operatorName' },
  { title: '迁移时间', dataIndex: 'transferDate', key: 'transferDate' },
];

// 响应式数据
const loading = ref(false);
const dataSource = ref<any[]>([]);
const queryForm = ref({
  customerName: '',
  fromStaffName: '',
  transferDateRange: undefined,
});
const pagination = ref({
  current: 1,
  pageSize: 10,
  total: 0,
  showSizeChanger: true,
  showQuickJumper: true,
});

// 方法实现...
</script>

<template>
  <div class="transfer-history-container">
    <a-card title="客户迁移历史" :bordered="false">
      <!-- 查询条件 -->
      <div class="search-form mb-4">
        <a-form layout="inline" :model="queryForm">
          <a-form-item label="客户姓名">
            <a-input
              v-model:value="queryForm.customerName"
              placeholder="请输入客户姓名"
            />
          </a-form-item>
          <a-form-item label="原负责员工">
            <a-input
              v-model:value="queryForm.fromStaffName"
              placeholder="请输入员工姓名"
            />
          </a-form-item>
          <a-form-item label="迁移日期">
            <a-range-picker v-model:value="queryForm.transferDateRange" />
          </a-form-item>
          <a-form-item>
            <a-space>
              <a-button type="primary">查询</a-button>
              <a-button>重置</a-button>
              <a-button type="primary" ghost> 导出 </a-button>
            </a-space>
          </a-form-item>
        </a-form>
      </div>

      <!-- 历史记录表格 -->
      <a-table
        :columns="columns"
        :data-source="dataSource"
        :pagination="pagination"
        :loading="loading"
        row-key="id"
        @change="handleTableChange"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'transferType'">
            <a-tag
              :color="record.transferType === 'RESIGNATION' ? 'red' : 'blue'"
            >
              {{
                record.transferType === 'RESIGNATION' ? '离职迁移' : '手动调整'
              }}
            </a-tag>
          </template>
        </template>
      </a-table>
    </a-card>
  </div>
</template>
